import * as echarts from 'echarts';
import {LitElement, html, TemplateResult} from 'lit';
import {customElement, property} from "lit/decorators.js";
import style from '../echarts.css.ts';

export interface GaugeProps {
    chartId?: string;
    width?: string;
    height?: string;
    showProgress?: boolean;
    seriesName?: string;
    name?: string;
    value?: number;
}

@customElement('lit-gauge')
export class LitGauge extends LitElement {
    @property({type: String}) chartId: string = 'lit-gauge-chart';
    @property({type: String}) width: string = '800px';
    @property({type: String}) height: string = '600px';
    @property({type: Boolean}) showProgress: boolean = false;
    @property({type: String}) seriesName: string = '';
    @property({type: String}) name: string = '';
    @property({type: Number}) value: number = 0;

    option: echarts.EChartsOption = {
        tooltip: {
            formatter: '{a} <br/>{b} : {c}%'
        },
        series: [
            {
                name: this.seriesName,
                type: 'gauge',
                progress: {
                    show: this.showProgress,
                },
                detail: {
                    formatter: '{value}'
                },
                data: [
                    {
                        value: this.value,
                        name: this.name
                    }
                ]
            }
        ]
    };

    static styles = style;

    updated(): void {
        (this.option.series as any)[0].name = this.seriesName;
        (this.option.series as any)[0].progress.show = this.showProgress;
        (this.option.series as any)[0].data[0].value = this.value;
        (this.option.series as any)[0].data[0].name = this.name;
        this.firstUpdated();
    }

    firstUpdated() {
        const chart = echarts.init(this.shadowRoot!.getElementById(this.chartId)!);
        chart.setOption(this.option);
    }

    render(): TemplateResult {
        return html`<div id="${this.chartId}" style="width:${this.width};height:${this.height};"></div>`;
    }
}

declare global {
    interface HTMLElementTagNameMap {
        'lit-gauge': LitGauge;
    }
}